<script setup>
import { useCartStore } from '@/stores/cart';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
defineProps({
  showCart: Boolean,
  cartItems: Array,
  cartTotal: Number
});
defineEmits(['close', 'remove']);
const router = useRouter();
const store = useCartStore(); 
const cartStyle = ref({})
let offsetX = 0;
let offsetY = 0;
const dragstart = (e) => { 
  const target = e.target;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
  target.style.opacity = "0.8"
}
const dragend = (e) => { 
  const target = e.target;
  target.style.opacity = "1"
  cartStyle.value = {left: e.clientX - offsetX + "px", top: e.clientY - offsetY + "px", right:'auto', transform: 'none'}
  Object.assign(target.style, cartStyle.value)
}
const checkout = () => {
  router.push({path: '/pay', query: { type: 'cart' }});
}
</script>

<template>
  <div class="cart-popup" v-if="showCart" draggable="true" @dragstart="dragstart" @dragend="dragend">
    <div class="cart-header">
      <h3>{{ $t("cart") }}</h3>
      <button @click="$emit('close')" class="close-btn">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="cart-items">
      <div v-if="store.cartItems.length === 0" class="empty-cart">
        <i class="fas fa-shopping-basket"></i>
        <p>{{ $t("cartEmpty") }}</p>
      </div>
      <div v-else>
        <div v-for="item in store.cartItems" :key="item.id" class="cart-item">
          <div class="item-info">
            <h4>{{ $t(`package${item.id}`) }}</h4>
            <p>¥ {{ item.price }}</p>
          </div>
          <button @click="$emit('remove', item.id)" class="remove-btn">
            <i class="fas fa-trash"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="cart-footer" v-if="store.cartItems.length > 0">
      <div class="total">
        <span>{{ $t("cartTotal") }}:</span>
        <span class="total-price">¥ {{ cartTotal }}</span>
      </div>
      <button class="checkout-btn" @click="checkout">{{ $t("cartCheckout") }}</button>
    </div>
  </div>
</template>

<style scoped>
.cart-popup {
  position: fixed;
  top: 100px;
  right: 30px;
  width: 350px;
  background: var(--cart-head);
  border-radius: 15px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  z-index: 99;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--cart-head);
  border-bottom: 1px solid #eee;
}

.cart-header h3 {
  margin: 0;
  color: var(--cart-text);
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #7f8c8d;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #ff6b6b;
}

.cart-items {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
}

.empty-cart {
  text-align: center;
  padding: 30px 0;
  color: #95a5a6;
}

.empty-cart i {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.5;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-info h4 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: var(--cart-text);
}

.item-info p {
  margin: 0;
  color: #4facfe;
  font-weight: 600;
}

.remove-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

.remove-btn:hover {
  background: #ff4757;
}

.cart-footer {
  padding: 20px;
  background: var(--cart-head);
  border-top: 1px solid #eee;
}

.total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cart-text);
}

.total-price {
  color: #ff6b6b;
  font-size: 1.3rem;
}

.checkout-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  opacity: var(--page-opacity);
}

.checkout-btn:hover {
  background: linear-gradient(45deg, #3a9df8, #00d9e6);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
}

@media (max-width: 768px) {
  .cart-popup {
    width: 300px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  .cart-popup {
    width: 280px;
  }
}
</style>